
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能病房 - 鸿蒙北向开发</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: #ffffff;
            color: #2d3748;
            overflow-x: hidden;
            min-height: 100vh;
        }
        
        /* 容器样式 */
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
        }
        
        /* 主内容区域 */
        .main-content {
            flex: 1;
            position: relative;
            overflow: hidden;
            padding-bottom: 80px; /* 为底部导航栏留出空间 */
        }
        
        /* 页面容器 */
        .page {
            display: none;
            width: 100%;
            height: 100%;
        }
        
        .page.active {
            display: block;
        }
        
        /* 卡片样式 */
        .sensor-card {
            background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }
        
        .sensor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        }
        
        /* 状态指示器 */
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        
        .status-green {
            background-color: #4ade80;
            box-shadow: 0 0 8px #4ade80;
        }
        
        .status-red {
            background-color: #f87171;
            box-shadow: 0 0 8px #f87171;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        /* 移动端底部导航 */
        .mobile-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            z-index: 100;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
            max-width: 480px;
            margin: 0 auto;
        }
        
        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #6b7280;
            transition: all 0.2s ease;
            padding: 4px 0;
        }
        
        .mobile-nav-item.active {
            color: #1e40af;
        }
        
        .mobile-nav-item i {
            margin-bottom: 4px;
        }
        
        /* 登录表单样式 */
        .login-form {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-bottom: 20px;
            transition: all 0.2s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #1e40af;
            box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
        }
        
        .form-input::placeholder {
            color: #9ca3af;
            font-size: 14px;
        }
        
        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #1e40af;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.2s ease;
            margin-top: 8px;
        }
        
        .login-button:hover {
            background-color: #1e3a8a;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
        }
        
        /* 数据卡片 */
        .data-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
        }
        
        .data-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }
        
        /* 蜂鸣器动画 */
        .buzzer-animation {
            animation: buzz 1s infinite;
        }
        
        @keyframes buzz {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        /* 图标样式 */
        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        
        /* 加载动画 */
        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #e5e7eb;
            border-top: 2px solid #1e40af;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 标题样式 */
        .main-title {
            font-weight: bold;
            text-align: center;
            margin-bottom: 8px;
        }
        
        /* 说明文字样式 */
        .description-text {
            line-height: 1.4;
            text-align: center;
            color: #6b7280;
        }
        
        /* 传感器模块头部样式 */
        .sensor-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 主内容区域 -->
        <div class="main-content p-4">
            <!-- 主页 -->
            <div id="home-page" class="page active">
                <div class="mb-6">
                    <h1 class="text-2xl font-bold text-gray-800 main-title">智能病房监控</h1>
                    <p class="text-gray-500 description-text">实时监测患者环境与安全</p>
                </div>
                
                <!-- 传感器卡片网格布局 -->
                <div class="space-y-6">
                    <!-- 人体感应模块 -->
                    <div class="sensor-card p-6">
                        <div class="flex justify-between items-center mb-4">
                            <div class="sensor-header">
                                <div class="feature-icon bg-blue-100 text-blue-600">
                                    <i class="fas fa-user-friends text-xl"></i>
                                </div>
                                <h2 class="text-xl font-semibold">人体感应模块</h2>
                            </div>
                            <div class="flex items-center">
                                <span class="status-indicator status-green"></span>
                                <span class="text-sm font-medium text-green-600">正常</span>
                            </div>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">感应状态</span>
                                    <span class="font-medium">已检测到人体</span>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">最近活动时间</span>
                                    <span class="font-medium">10:24:36</span>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">感应灵敏度</span>
                                    <div class="flex items-center">
                                        <i class="fas fa-signal text-blue-500 mr-2"></i>
                                        <span class="font-medium">高</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 烟雾传感器模块 -->
                    <div class="sensor-card p-6">
                        <div class="flex justify-between items-center mb-4">
                            <div class="sensor-header">
                                <div class="feature-icon bg-red-100 text-red-600">
                                    <i class="fas fa-smog text-xl"></i>
                                </div>
                                <h2 class="text-xl font-semibold">烟雾传感器模块</h2>
                            </div>
                            <div class="flex items-center">
                                <span class="status-indicator status-red"></span>
                                <span class="text-sm font-medium text-red-600">警报中</span>
                            </div>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">烟雾浓度</span>
                                    <div class="flex items-center">
                                        <i class="fas fa-exclamation-triangle text-red-500 mr-2 buzzer-animation"></i>
                                        <span class="font-medium text-red-600">850ppm</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">蜂鸣器状态</span>
                                    <div class="flex items-center">
                                        <i class="fas fa-volume-up text-red-500 mr-2 buzzer-animation"></i>
                                        <span class="font-medium text-red-600">已激活</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">报警阈值</span>
                                    <span class="font-medium">500ppm</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 警报控制按钮 -->
                        <div class="mt-6">
                            <button class="w-full py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center">
                                <i class="fas fa-bell-slash mr-2"></i> 关闭警报
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 历史数据图表 -->
                <div class="mt-8 sensor-card p-6">
                    <h2 class="text-xl font-semibold mb-4">今日监测数据</h2>
                    <div class="h-64">
                        <canvas id="monitorChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 我的页面 -->
            <div id="profile-page" class="page">
                <div class="mb-8">
                    <h1 class="text-2xl font-bold text-gray-800 main-title">个人中心</h1>
                    <p class="text-gray-500 description-text">管理监测患者和偏好设置</p>
                </div>
                
                <!-- 未登录状态 -->
                <div id="login-section" class="px-4">
                    <div class="login-form">
                        <h2 class="text-xl font-semibold mb-6 text-center">请登录</h2>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="username">用户名</label>
                            <input type="text" id="username" class="form-input" placeholder="请输入用户名">
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="password">密码</label>
                            <input type="password" id="password" class="form-input" placeholder="请输入密码">
                        </div>
                        
                        <button id="login-button" class="login-button">
                            <span id="login-text">登录</span>
                            <span id="login-loading" class="loading-spinner hidden ml-2"></span>
                        </button>
<!--                         
                        <div class="text-center mt-6 text-sm text-gray-500">
                            <a href="#" class="text-blue-600 hover:underline">忘记密码?</a>
                        </div> -->
                    </div>
                    
                  
                </div>
                
                <!-- 已登录状态 (默认隐藏) -->
                <div id="profile-section" class="hidden px-4">
                    <div class="sensor-card p-6 mb-6">
                        <div class="flex items-center">
                            <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-2xl">
                                <i class="fas fa-user-md"></i>
                            </div>
                            <div class="ml-4">
                                <h2 class="text-xl font-semibold" id="user-name">张医生</h2>
                                <p class="text-gray-500" id="user-role">主任医师</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="sensor-card p-6 mb-6">
                        <h2 class="text-xl font-semibold mb-4">个人信息</h2>
                        
                        <div class="space-y-4">
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">工号</span>
                                    <span class="font-medium">DOC2024001</span>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">所属科室</span>
                                    <span class="font-medium">神经内科</span>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">联系电话</span>
                                    <span class="font-medium">138****6789</span>
                                </div>
                            </div>
                            
                            <div class="data-card">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">邮箱</span>
                                    <span class="font-medium">zhang@hospital.com</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="sensor-card p-6 mb-6">
                        <h2 class="text-xl font-semibold mb-4">病房管理</h2>
                        
                        <div class="space-y-3">
                            <div class="data-card flex justify-between items-center cursor-pointer hover:bg-blue-50">
                                <div class="flex items-center">
                                    <i class="fas fa-bed text-blue-600 mr-3"></i>
                                    <span class="font-medium">我的病房</span>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                            
                            <div class="data-card flex justify-between items-center cursor-pointer hover:bg-blue-50">
                                <div class="flex items-center">
                                    <i class="fas fa-history text-blue-600 mr-3"></i>
                                    <span class="font-medium">历史记录</span>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                            
                            <div class="data-card flex justify-between items-center cursor-pointer hover:bg-blue-50">
                                <div class="flex items-center">
                                    <i class="fas fa-cog text-blue-600 mr-3"></i>
                                    <span class="font-medium">设置</span>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                    
                    <button id="logout-button" class="w-full py-3 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition-colors">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端底部导航 -->
        <div class="mobile-nav">
            <div class="mobile-nav-item active" id="mobile-home">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs">主页</span>
            </div>
            <div class="mobile-nav-item" id="mobile-profile">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs">我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const homePage = document.getElementById('home-page');
            const profilePage = document.getElementById('profile-page');
            const mobileHome = document.getElementById('mobile-home');
            const mobileProfile = document.getElementById('mobile-profile');
            const loginSection = document.getElementById('login-section');
            const profileSection = document.getElementById('profile-section');
            const loginButton = document.getElementById('login-button');
            const logoutButton = document.getElementById('logout-button');
            const loginText = document.getElementById('login-text');
            const loginLoading = document.getElementById('login-loading');
            
            // 切换页面函数
            function switchPage(pageId) {
                // 隐藏所有页面
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                
                // 移除所有导航项的激活状态
                document.querySelectorAll('.mobile-nav-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 显示选中的页面
                document.getElementById(pageId).classList.add('active');
                
                // 激活对应的导航项
                if (pageId === 'home-page') {
                    mobileHome.classList.add('active');
                } else if (pageId === 'profile-page') {
                    mobileProfile.classList.add('active');
                }
            }
            
            // 登录功能
            function login() {
                // 显示加载状态
                loginText.textContent = '登录中';
                loginLoading.classList.remove('hidden');
                loginButton.disabled = true;
                
                // 模拟登录请求
                setTimeout(() => {
                    // 隐藏登录区域，显示个人信息区域
                    loginSection.classList.add('hidden');
                    profileSection.classList.remove('hidden');
                    
                    // 重置按钮状态
                    loginText.textContent = '登录';
                    loginLoading.classList.add('hidden');
                    loginButton.disabled = false;
                }, 1500);
            }
            
            // 退出登录功能
            function logout() {
                // 显示登录区域，隐藏个人信息区域
                profileSection.classList.add('hidden');
                loginSection.classList.remove('hidden');
            }
            
            // 添加事件监听器
            mobileHome.addEventListener('click', () => switchPage('home-page'));
            mobileProfile.addEventListener('click', () => switchPage('profile-page'));
            loginButton.addEventListener('click', login);
            logoutButton.addEventListener('click', logout);
            
            // 初始化图表
            const ctx = document.getElementById('monitorChart').getContext('2d');
            const monitorChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                    datasets: [
                        {
                            label: '烟雾浓度(ppm)',
                            data: [120, 110, 130, 150, 850, 820],
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '人体感应(次数)',
                            data: [3, 1, 8, 12, 15, 7],
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });
            
            // 模拟数据更新
            setInterval(() => {
                // 更新时间
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds().toString().padStart(2, '0');
                const currentTime = `${hours}:${minutes}:${seconds}`;
                
                // 更新人体感应模块的最近活动时间
                const timeElements = document.querySelectorAll('.data-card .font-medium');
                for (let element of timeElements) {
                    if (element.textContent.match(/^\d{2}:\d{2}:\d{2}$/)) {
                        element.textContent = currentTime;
                        break;
                    }
                }
            }, 1000);

            function captureTab(id, name) {
                const prev = document.querySelector('.page.active') ? document.querySelector('.page.active').id : 'home-page';
                switchPage(id);
                setTimeout(() => {
                    html2canvas(document.querySelector('.app-container')).then(canvas => {
                        canvas.toBlob(blob => {
                            const a = document.createElement('a');
                            a.href = URL.createObjectURL(blob);
                            a.download = name;
                            a.click();
                            URL.revokeObjectURL(a.href);
                            switchPage(prev);
                        });
                    });
                }, 300);
            }

            setTimeout(() => {
                captureTab('home-page', 'screenshot-home.png');
                setTimeout(() => {
                    captureTab('profile-page', 'screenshot-profile.png');
                }, 1200);
            }, 800);
        });
    </script>
</body>
</html>
